<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="560" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form ref="formRef" :model="tableData" class="pt-20 px-20">
        <a-table :loading="loading" rowKey="index" bordered size="small" :dataSource="tableData" :columns="goodProcColumns" :pagination="false" class="form-table mb-20" :scroll="{y: 400}" id="uniqTable">
          <template #headerCell="{ column }">
            <template v-if="column.key === 'adeptProcess'">
              <span class="text-red">*</span>{{$t('sysManage.goodProcNa')}}
            </template>
          </template>
          <template #bodyCell="{ column, record, index }">  
            <template v-if="column.key === 'adeptProcess'"> 
              <a-form-item :name="[index, 'adeptProcess']" :rules="[{ required: true, message: $t('sysManage.enterGoodProcNa'), trigger: 'change' }]">
                <a-input :placeholder="$t('common.pleaseInput')" v-model:value="record.adeptProcess" :maxlength="19" allowClear />
              </a-form-item>
            </template>
            <template v-else-if="column.key === 'operate'">
              <span class="table-operate-container">
                <a-button type="link" class="primary-link" @click="handleAdd(record)">{{$t('common.addNew')}}</a-button>
                <a-divider type="vertical" />
                <a-button type="link" class="warning-link" :disabled="tableData.length === 1" @click="handleDelete(record.id)">{{$t('common.del')}}</a-button>
              </span>
            </template>
          </template> 
        </a-table>
      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup >
import { ref, nextTick  } from 'vue' 
import { cloneDeep } from 'lodash'
import axios from '@/utils/request'
import { message } from 'ant-design-vue'
import {goodProcColumns} from './employeesConfig'
import i18n from '@/locales/index' 
const { t } = i18n.global
const emits = defineEmits(['ok'])
let visible = ref(false)
let confirmLoading = ref(false) 
let loading = ref(false) 
const formRef = ref()
const title = ref('') 
let recordInfo = ref({}) 
let tableData = ref([])
const open = async (record) => {
  title.value = `${t('basicData.goodProcess')} (${record.nickName})`
  recordInfo.value = Object.assign({}, record)
  await getList()
  visible.value = true
  await nextTick() 
  formRef.value.resetFields()
}
const getList = async ()=> {
  loading.value = true
  try {
  const res = await axios.postAction('/api/basic/staff-adept-process/list', {staffId : recordInfo.value.id})
  tableData.value = res.success ?  res.data.length? res.data:  [{ id: Math.random(), adeptProcess: '' }]: [{ id: Math.random(), adeptProcess: '' }]
  loading.value = false
  } catch {
    tableData.value = [{ id: Math.random(), adeptProcess: '' }]
    loading.value = false
  }
}
const handleAdd = async () => {
  let obj = { id: Math.random(), adeptProcess: '' }
  tableData.value.push(obj) 
}
const handleDelete = (id) => {
  const dataList = tableData.value.filter(item => item.id !== id)
  tableData.value = dataList
}
const getQueryParams = () => {
  let data = cloneDeep(tableData.value)
  data.forEach(i=> {
    i.staffId = recordInfo.value.id
    delete i.id
  })
  return {staffAdeptProcessList: data, staffId: recordInfo.value.id}
}
const handleOk = async () => {
  try {
    await formRef.value.validateFields()
    let params = getQueryParams()
    confirmLoading.value = true 
    let res = await axios.postAction('/api/basic/staff-adept-process/save-by-staff', params)
    confirmLoading.value = false
    if (res.success) {
      message.success(res.msg)
      emits('ok')
      handleCancel()
    } else {
      confirmLoading.value = false
    }
  } catch {
    confirmLoading.value = false
    console.log('error')
  }
}
const handleCancel = () => { 
  confirmLoading.value = false
  formRef.value.resetFields()
  tableData.value = []
  visible.value = false
} 
defineExpose({
  open
})

</script>